<template>
	<view>
		<u-navbar placeholder fixed autoBack title="考勤打卡"></u-navbar>
		<map id="map" :show-location="true" :style="`width:750rpx;height: ${windowHeight}px`"></map>
	</view>
</template>

<script>
import { checkDkfw, fangwei } from '../../../common/api.js';
export default {
	data() {
		return {
			windowHeight: 1000,
			_mapContext: null,
			maps: null,
			time: null,
			status: null
		};
	},
	onUnload() {
		clearInterval(this.time);
	},
	mounted() {
		this.windowHeight = uni.$u.sys().windowHeight - 44 - uni.$u.sys().statusBarHeight;
	},
	onReady() {
		this._mapContext = uni.createMapContext('map', this);
		this.maps = this._mapContext.$getAppMap();
		this.getLocation();
	},
	onLoad(e) {
		this.status = e.status;
	},
	methods: {
		signVideo() {
			// 检测是否在范围内
			uni.getLocation({
				type: 'gcj02',
				success: e => {
					checkDkfw({
						jw: e.longitude + ',' + e.latitude
					})
						.then(eq => {
							uni.$u.route({
								url: '/pages/index/work/authVideo',
								params: {
									status: this.status
								}
							});
						})
						.catch(e => {
							return uni.$u.toast(e.msg);
						});
				},
				fail: e => {
					uni.$u.toast('定位失败, 请稍后再试');
				}
			});
		},
		getLocation() {
			// #ifdef H5
			return uni.$u.toast('H5不做功能');
			// #endif
			// 显示当前位置
			// this.maps.showUserLocation(true);
			// this.maps.showZoomControls(true); // 显示 缩放控件
			// 正式地址获取异常 用uni定位纠正
			// this.maps.getUserLocation((state, point) => {
			uni.showLoading({
				title: '定位中...',
				mask: true
			});
			uni.getLocation({
				type: 'gcj02',
				success: point => {
					this.point = point;
					// 移动到当前位置
					this.maps.setCenter(new plus.maps.Point(Number(point.longitude), Number(point.latitude)));

					// todo 获得打开位置 以及 范围
					fangwei({
						params: {
							gcbh: this.$user.ssgcxx[this.$appIndex].gcbh,
							pageNum: 1,
							pageSize: 1000
						}
					}).then(e => {
						let data = e.rows;
						for (let i in data) {
							let jw = data[i].fwzb.split(',');
							// 录入反了 反取
							let longitude = Number(jw[0]);
							let latitude = Number(jw[1]);
							let range = Number(data[i].fwbj); // 打卡范围 米

							// this.maps.setCenter(new plus.maps.Point(longitude, latitude))

							// 画圈
							let circle = new plus.maps.Circle(new plus.maps.Point(longitude, latitude), range);
							// circle.setRadius(500); // 更新圈 范围 米
							circle.setStrokeColor('#21A5F3'); // 圈 边框色
							circle.setStrokeOpacity(0.5); // 圈 边框 透明度
							circle.setLineWidth(1); // 圈 边框宽度
							circle.setFillColor('#21A5F3'); // 圈 填充色
							circle.setFillOpacity(0.2); // 圈 填充透明度 UI 0.2
							// 添加到地图上显示
							this.maps.addOverlay(circle);
						}
						if (data.length <= 0) {
							uni.$u.toast('未设置打卡地点');
						}
					});

					// 新加的不规则区域
					// let points = new Array(
					// 	new plus.maps.Point(116.0, 39.0),
					// 	new plus.maps.Point(115.0, 38.0),
					// 	new plus.maps.Point(117.0, 38.0),
					// 	new plus.maps.Point(Number(point.longitude), Number(point.latitude))
					// );
					// let polygonObj = new plus.maps.Polygon(points);
					// polygonObj.setStrokeColor('#21A5F3'); // 圈 边框色
					// polygonObj.setStrokeOpacity(0.5); // 圈 边框 透明度
					// polygonObj.setLineWidth(1); // 圈 边框宽度
					// polygonObj.setFillColor('#21A5F3'); // 圈 填充色
					// polygonObj.setFillOpacity(0.2); // 圈 填充透明度 UI 0.2
					// this.maps.addOverlay(polygonObj);

					// 做标注
					let marker = new plus.maps.Marker(new plus.maps.Point(point.longitude, point.latitude));
					marker.setIcon('/static/image/qy.png');
					let bubble = new plus.maps.Bubble('打卡 ' + uni.$u.timeFormat(new Date().getTime(), 'hh:MM'));
					marker.setBubble(bubble, true);
					bubble.onclick = bubble => {
						// todo 这里做校验
						this.signVideo();
					};
					// 添加到地图上显示
					this.maps.addOverlay(marker);
				},
				complete: () => {
					uni.hideLoading();
				},
				fail: e => {
					console.log(e);
				}
			});
			// });
		}
	}
};
</script>

<style lang="scss"></style>
